<template>
	<div class="box">
		<p>渲染10条数据，其余的滚动加载</p>
		<virtual-list
			style="height: 100px; overflow-y: auto; border: 1px solid red"
			:data-key="'uid'"
			:keeps="10"
			:data-sources="items"
			:data-component="itemComponent"
		/>
	</div>
</template>

<script>
import VirtualList from "vue-virtual-scroll-list";
import Item from "./Item";
import items from "./list";
export default {
	name: "VirtualList",
	components: { "virtual-list": VirtualList },
	data() {
		return {
			itemComponent: Item,
			items: items,
		};
	},
};
</script>

<style lang="scss" scoped>
.box {
	margin-top: 300px;
}
</style>
